<template>
  <a-card :bordered="false">

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-bottom: 10px">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <a-table
      :columns="columns"
      size="middle"
      :pagination="false"
      :dataSource="dataSource"
      :loading="loading">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleAddSub(record)">添加子菜单</a>
              </a-menu-item>

              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.menuId)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
    </a-table>
    <!-- table区域-end -->
    <permission-modal ref="modalForm" @ok="modalFormOk"></permission-modal>
  </a-card>
</template>

<script>
  import PermissionModal from './modules/MenuModal'
  import { getMenuTree , deleteMenu} from '@/api/menu'

  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '菜单类型',
      dataIndex: 'type',
      key: 'type',
      customRender: function (text) {
        if (text === 0) {
          return '目录'
        } else if (text === 1) {
          return '菜单'
        } else if (text === 2) {
          return '按钮/权限'
        } else {
          return text
        }
      }
    },
    {
      title: 'icon',
      dataIndex: 'icon',
      key: 'icon'
    },
    {
      title: '组件',
      dataIndex: 'component',
      key: 'component',
      scopedSlots: { customRender: 'component' }
    },
    {
      title: '路径',
      dataIndex: 'path',
      key: 'path',
      scopedSlots: { customRender: 'path' }
    },
    {
      title: '授权标识',
      dataIndex: 'perms',
      key: 'perms'
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort'
    },
    {
      title: '操作',
      dataIndex: 'action',
      scopedSlots: { customRender: 'action' },
      align: 'center',
      width: 150
    }
  ]

  export default {
    name: 'PermissionList',
    components: {
      PermissionModal
    },
    data () {
      return {
        dataSource: [],
        // 表头
        columns: columns,
        loading: false
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      loadData () {
        this.loading = true
        this.dataSource = []
        getMenuTree().then((res) => {
          if (res.code == 200) {
            this.dataSource = res.data
            this.loading = false
          }
        })
      },
      handleAddSub (record) {
        this.$refs.modalForm.title = '添加子菜单'
        console.log('6', record)
        if (record.type == 0) {
          this.$refs.modalForm.localMenuType = 1
        } else if (record.type == 1) {
          this.$refs.modalForm.localMenuType = 2
        }
        this.$refs.modalForm.disableSubmit = false
        this.$refs.modalForm.edit({ route: true, 'parentId': record.menuId })
      },
      handleDetail:function(record){
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title="详情";
        this.$refs.modalForm.disableSubmit = true;
      },
      handleAdd: function () {
        this.$refs.modalForm.add()
        this.$refs.modalForm.title = '新增'
        this.$refs.modalForm.disableSubmit = false
      },
      handleEdit: function (record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'
        this.$refs.modalForm.localMenuType = record.type
        this.$refs.modalForm.disableSubmit = false
      },
      handleDelete: function (id) {
        let that = this
        deleteMenu(id).then((res) => {
          if (res.code == 200) {
            that.$message.success(res.msg);
            that.loadData();
          } else {
            that.$message.warning(res.msg);
          }
        });
      },
      modalFormOk () {
        // 新增/修改 成功时，重载列表
        this.loadData()
      }
    }
  }
</script>
<style scoped>
</style>